<template>
    <h1>v-model案例驱动</h1>
    <span>用户名字:</span> <input type="text" v-model="Uname">  model的数据：{{ Uname }}<br />
    <span>用户密码:</span> <input type="text" v-model="pwd"> model的数据： {{ pwd }}<br />
    <br>
    <span>生产地：</span>
    <select v-model="from">
        <option value="河南">河南</option>
        <option value="平顶山">平顶山</option>
        <option value="迦南学院">迦南学院</option>
    </select> model的数据： {{ from }}
    <br>
    <span>爱好：</span>
    <input type="checkbox" v-model="hobby"> 美杜莎
    <input type="checkbox" v-model="hobby"> 萧薰儿
    <input type="checkbox" v-model="hobby"> 小医仙
    <input type="checkbox" v-model="hobby"> 嫣然 <br>
   <br>
    <span>性别：</span>
    <input type="radio" v-model="sex" value="男"> 男
    <input type="radio" v-model="sex" value="女"> 女 <br>
    <span>年龄</span>
    <!--v-model 修饰符： number 把parseFloat转换成数值 赋值给v-model-->
    <input type="number" v-model.number="age">
   <br>
    <span>自我介绍：</span>
    <textarea v-model.lazy="instr" cols="30" rows="10"></textarea> model的数据： {{ instr }}
    <span>人生格言：</span>
    <!--v-model 修饰符： trim 去除前空格-->
    <input type="text" v-model.trim="motto"> 
</template>
<script>
export default {
    data() {
        return {
            //组件应用的方式
            // 1、组件分为子组件和父组件
            // 2、父组件要引用子组件时 需要在components中注册子组件
            // 3、父组件引用时 标签名是子组件的vue名称
        /**
         * v-model 双向数据绑定
         * 语法：v-model="vue中的数据变量"
         * 双向数据绑定的：
         * 数据发生变化  -> 视图发生变化
         * 视图发生变化 -> 数据发生变化
         * 用户绑定 名字发生变化 vue内部采用是mvvm的设计模式
         */
            Uname: "萧炎",
            pwd: "123457",
            from: "圣魂村",
            hobby: [],
            sex: '',
            instr: '',
            age: 18
        }
    }
};


</script>